<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>操作登陆</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
       body {background-color:#ffffff;}
      .wrap {display: flex;}
      .logo {width:100%;height:30%;margin-top:80px; margin-bottom:30px;}
      .logo img {display:block ;margin:0 auto;width:50px;height:50px;border-radius:5px; }
    </style>
</head>
<body >
    <div class="aui-content" >
        <div class="logo">
               <img src="../image/logo.png" />
        </div>
        <section id="main">

        </section>
        <script id="template" type="text/x-dot-template">
        <ul class="aui-list aui-form-list  aui-font-size-18">
             <li class="aui-list-item aui-padded-t-15 aui-padded-b-15">
               <div class="aui-list-item-inner">
                 <div class="aui-list-item-label">
                   用户
                 </div>
                 <div class="aui-list-item-input">
                     <input type="text"  placeholder="输入用户" id="username">
                 </div>
                 </div>
               </li>
               <li class="aui-list-item aui-padded-t-15 aui-padded-b-15">
                 <div class="aui-list-item-inner">
                   <div class="aui-list-item-label">
                     密码
                   </div>
                   <div class="aui-list-item-input">
                       <input type="password" placeholder="输入密码" id="pwd">
                   </div>
                   <div class="aui-list-item-label-icon" tapmode="hover" onclick="fntoggle()">
                     <i class="aui-iconfont aui-icon-hide" id="tip" ></i>
                   </div>
                 </div>
               </li>
               <li class="aui-list-item aui-padded-t-15 aui-padded-b-15">
                 <div class="aui-list-item-inner aui-list-item-center">
                   <div class="aui-btn aui-btn-info  aui-padded-r-15 aui-padded-l-15 aui-margin-r-15" tapmode onclick="submit()">提交</div>
                   <div class="aui-btn aui-btn-danger aui-padded-r-15 aui-padded-l-15 aui-margin-l-15">取消</div>
                 </div>
               </li>
        </ul>
        </script>
        <script id="template2" type="text/x-dot-template">
           <ul class="aui-list aui-form-list ">
             <li class="aui-list-item aui-padded-t-15 aui-padded-b-15 ">
               <div class="aui-list-item-inner aui-font-size-18">
                 <div class="aui-list-item-label ">
                   当前用户
                 </div>
                 <div class="aui-list-item-input">
                     <input type="text"  value ="{{=it.username}}"  readonly="readonly">
                 </div>
               </li>
               <li class="aui-list-item aui-padded-t-15 aui-padded-b-15 ">
                 <div class="aui-list-item-inner aui-font-size-18">
                   <div class="aui-list-item-label ">
                    登录时间
                   </div>
                   <div class="aui-list-item-input">
                       <input type="text" value ="{{=it.data.last_login_time}}"  readonly="readonly">
                   </div>
                 </li>
                 <li class="aui-list-item aui-padded-t-15 aui-padded-b-15">
                   <div class="aui-list-item-inner aui-list-item-center">
                     <div class="aui-btn aui-btn-info  aui-padded-r-15 aui-padded-l-15 aui-margin-r-15" tapmode="hover" onclick="qiehuan()" >切换</div>
                     <div class="aui-btn aui-btn-danger aui-padded-r-15 aui-padded-l-15 aui-margin-l-15" tapmode="hover" onclick="qiehuan()" >注销</div>
                   </div>
                 </li>
              </ul>
        </script>

    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript">
  var user, toast ;
  apiready=function(){
    api.parseTapmode();
     toast = new auiToast();
     init();
  };

  function init(){
     user =$api.getStorage(cacheUser);
     if(user){
      let evalText =doT.template($("#template2").text());
        console.info("user"+JSON.stringify(user));
       $("#main").html(evalText(user));
     }else{
       let evalText =doT.template($("#template").text());
        $("#main").html(evalText());
     }

  }


// submit come on !
function submit(){
    let login = $api.dom('#username').value;
    let pwd = $api.dom('#pwd').value;
     if(!login){
       toast.fail({
         title:'登陆名不能空',
         duration:2000
       });
       return false;
     }

     if(!pwd){
       toast.fail({
         title:'密码不能为空',
          duration:2000
       });
       return false;
     }

    let param ={
     login:login,
     pwd:pwd
    };

    api.showProgress({
        style: 'default',
        animationType: 'zoom',
        title: '提交中...',
        text: '数据正在传送...',
        modal: true
    });

    ajaxRequest('/barscan/login','post',param,function(ret,err){
         api.hideProgress();
         if(ret){
            if(ret.result){
              toast.success({
                title:'登入成功',
                duration:2000
              });

              $api.setStorage(cacheUser,{
                username:login,
                data:ret.data
              });
              init();
            }else{
              toast.fail({
                title:ret.errmsg,
                duration:2000
              });
            }
         }
    });
};

function fntoggle(){
  if($api.hasCls($api.dom("#tip"),'aui-icon-hide')){
     $api.attr($api.dom("#tip"), 'class', 'aui-iconfont aui-icon-display');
     $api.attr($api.dom("#pwd"), 'type', 'text');
  }else{
    $api.attr($api.dom("#tip"), 'class', 'aui-iconfont aui-icon-hide');
      $api.attr($api.dom("#pwd"), 'type', 'password');
  }
};

function qiehuan(){
  $api.rmStorage(cacheUser);
  init();
};

</script>
</html>
